<template>
  <div ref="chartsRef" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, watch, nextTick } from 'vue';

interface EChartsData {
  heng: string[];
  in: number[];
  out: number[];
}

interface Props {
  echartsData: EChartsData;
}

const props = defineProps<Props>();
const chartsRef = ref<HTMLElement>();
let myChart: echarts.ECharts | null = null;

const drawLine = (echartsData: EChartsData) => {
  if (!myChart) {
    myChart = echarts.init(chartsRef.value);
  }

  const labelColor = '#74BFE7';
  const fontSize = '12';

  const option = {
    title: {
      text: 'MPa',
      textStyle: {
        color: '#fff',
        fontSize: 12,
        fontWeight: 'normal'
      },
      left: '16',
      top: '0'
    },
    grid: {
      top: '40px',
      left: '50px',
      right: '0px',
      bottom: '18%'
    },
    tooltip: {
      trigger: 'axis'
    },
    color: ['#2AFFA3', '#00ddff'],
    legend: {
      icon: 'roundRect',
      x: 'right',
      top: 0,
      itemGap: 10,
      itemWidth: 15,
      itemHeight: 15,
      textStyle: {
        color: '#fff',
        fontSize: 12
      }
    },
    xAxis: [
      {
        type: 'category',
        axisLabel: {
          color: labelColor,
          fontSize: fontSize,
          interval: 0,
          rotate: 30
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: '#195384'
          }
        },
        data: echartsData.heng
      }
    ],
    yAxis: [
      {
        type: 'value',
        nameTextStyle: {
          fontSize: fontSize,
          color: '#C8DEFA'
        },
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: labelColor,
            fontSize: fontSize
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            type: 'solid',
            color: '#007184'
          },
          show: true
        }
      }
    ],
    series: [
      {
        showSymbol: true,
        name: '进站压力',
        type: 'line',
        symbolSize: 5,
        smooth: true,
        itemStyle: {
          lineStyle: {
            color: '#2AFFA3',
            width: 2
          },
          shadowBlur: 20
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#00314F'
            },
            {
              offset: 1,
              color: '#0B7677'
            }
          ])
        },
        data: echartsData.in
      },
      {
        showSymbol: true,
        name: '出站压力',
        type: 'line',
        symbolSize: 5,
        smooth: true,
        itemStyle: {
          lineStyle: {
            color: '#00ddff',
            width: 2
          },
          shadowBlur: 20
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#00314F'
            },
            {
              offset: 1,
              color: '#00ddff'
            }
          ])
        },
        data: echartsData.out
      }
    ]
  };

  myChart.setOption(option, true);
};

onMounted(() => {
  nextTick(() => {
    drawLine(props.echartsData);
  });
});

watch(
  () => props.echartsData,
  (newVal) => {
    drawLine(newVal);
  }
);
</script>
